<template>
	<view class="coupon-box">
		<view v-for="(item, index) in couponArr" :key="index" class="card-box">
			<view class="card-title flex-between">
				<text>优惠券</text>
				<text v-if="item.price" class="money">-¥{{ item.price }}</text>
			</view>
			
			<!-- 优惠券列表 -->
			<view class="coupon-list">
				<view class="coupon-item">
					<view class="lable">选择优惠类型</view>
					<wd-select-picker
						v-model="item.select"
						type="radio"
						:show-confirm="false"
						use-default-slot
						checked-color="#FF844C"
						value-key='id'
						label-key='name'
						clearable
						@confirm='handleConfirm($event, index)'
						:columns="columns"
					>
						<view class="picker-input" @click="item.showPopup = true">
							<view :class="[{ select: item.select }]">{{ item.name || '点击选择优惠类型'}}</view>
							<wd-icon name="arrow-down" size="18px" color='#FF844C'></wd-icon>
						</view>
					</wd-select-picker>
				</view>
				
				<view class="coupon-item">
					<view class="lable">优惠卷码</view>
					<wd-input type="text" v-model="item.code" no-border custom-class="input-style" placeholder="点击输入卷码" />
				</view>
			</view>
		</view>
		
		<view class="btn-add" @click="handleAdd">继续添加优惠卷</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, ref } from 'vue'

	const item = {
		select: '',
		showPopup: false,
		id: '',
		name: '',
		code: '',
		price: '',
		// prev_price: 0
	}
	const couponArr = ref([
		item
	])
	// 获取选择的优惠券码金额
	// const getDisPrice = computed(() => {
	// 	return (index) => {
	// 		const { select, name } = couponArr.value[index]

	// 		if (!name) return ''
			
	// 		const { price = '' } = { ...columns.value.find(item => item.id === select) }
			
	// 		return price
	// 	}
	// })
	
	const columns = ref<Record<string, any>>(
		[
			{
				id: '',
				name: '不选择',
				price: ''
			},
			{
				"id": 1,
				"name": "滑雪板打蜡+修刃雪具维养组合",
				"is_open": "1",
				"price": 330,
				"type": "0"
			},
			{
				"id": 2,
				"name": "滑雪板打蜡+修刃雪具维养组合",
				"is_open": "1",
				"price": 280,
				"type": "1",
			},
			{
				"id": 3,
				"name": "清洗+防水层护理服务",
				"is_open": "1",
				"price": 180,
				"type": "2"
			},
			{
				"id": 4,
				"name": "雪板打蜡雪具维养组合",
				"is_open": "1",
				"price": 150,
				"type": "3"
			},
			{
				"id": 5,
				"name": "板面、板底、板体”维修服务",
				"is_open": "1",
				"price": 100,
				"type": "3"
			},
			{
				"id": 6,
				"name": "TPU高透膜仅单板使用",
				"is_open": "1",
				"price": 400,
				"type": "1",
			},
			{
				"id": 7,
				"name": "雪鞋维修",
				"is_open": "1",
				"price": 100,
				"type": "2"
			}
		])
	
	// 优惠券选择回调
	
	function handleConfirm({ selectedItems }, index) {
		const { name = '', price = '', id = '' } = { ...selectedItems }

		couponArr.value[index] = {
			...couponArr.value[index],
			id,
			name: name === '不选择' ? '' : name,
			price
		}
		// 计算总价
	}
	// function initData() {
	// 	getVoucherList().then(res => {
	// 		console.log(res)
	// 		columns.value = res
	// 	})
	// }
	
	function handleAdd() {
		couponArr.value.push(item)
	}
	
	defineExpose({
		couponArr
	})
</script>

<style lang="scss" scoped>
	.coupon-box {
		margin-top: 16px;
		.card-title {
			.money {
				font-size: 18px;
				font-weight: 600;
				line-height: 24px;
				color: $uni-tabbar-color;
			}
		}
		.coupon-list {
			padding: 18px 15px 26px 15px;
			.coupon-item {
				& + .coupon-item {
					padding-top: 16px;
				}
				.lable {
					font-size: 16px;
					font-weight: 500;
					line-height: 20px;
					color: #23282C;
					padding-bottom: 6px;
				}
			}
		}
		
		.btn-add {
			margin: 25px 15px 0 15px;
			height: 28px;
			line-height: 28px;
			text-align: center;
			border-radius: 8px;
			background-color: #58618E;
			font-size: 12px;
			font-weight: 600;
			color: #fff;
		}
	}
</style>